var vm = new Vue({
    el: '#app',
    data: {
        reverseMsg: "",
        msg: ""
    },
    methods: {
        reverse: function() {
            this.reverseMsg = this.msg.split("").reverse().join("");
        }
    }
});

var vm1 = new Vue({
    el: '#app1',
    data: {
        msg: ""
    },
    filters: {
        toUpper: function(value) {
            if(!value){
                return '';
            }
            return value.toUpperCase();
        }
    }
});

// v-bind 缩写
// Vue.js 为两个最为常用的指令提供了特别的缩写：
// <!-- 完整语法 -->
// <a v-bind:href="url"></a>
// <!-- 缩写 -->
// <a :href="url"></a>

// v-on 缩写
// <!-- 完整语法 -->
// <a v-on:click="doSomething"></a>
// <!-- 缩写 -->
// <a @click="doSomething"></a>

var vm2 = new Vue({
    el: '#app2',
    data: {
        num: Math.random()
    }
});

var vm3 = new Vue({
    el: '#app3',
    data: {
        obj: {
            name: '菜鸟教程',
            url: 'http://www.runoob.com',
            slogan: '学的不仅是技术，更是梦想！'
        }
    }
});

var vm4 = new Vue({
    el: '#app4',
    data: {
        num: 1
    },
    watch:{
        num:function (newVal,oldVal){
            alert("newVal :" + newVal +"oldVal :" +oldVal);
        }
    }
});

var vm5 = new Vue({
    el: '#app5',
    data: {
    }
});

var vm6 = new Vue({
    el: '#app6',
    data: {
        checkedNames:[]
    }
});

var vm7 = new Vue({
    el: '#app7',
    data: {
        selectedSku:''
    }
});

var vm8 = new Vue({
    el: '#app8',
    data: {
        msg:'',
        msg1:'',
        num:''
    }
});

Vue.component('runoob',{
    template:'<h3>这是一个全局组件！！！！</h3>'
})

var vm9 = new Vue({
    el: '#app9'
});

Vue.directive('focus',{
    //元素绑定到dom中时，会自动获取焦点
    inserted:function (el) {
        el.focus();
    }
})
var vm10 = new Vue({
    el: '#app10'
});

const UserAdmin = {template: '<span>user admin page</span>'}
const SkuAdmin = {template: '<span>sku admin page</span>'}
const routes =[
    {path:'/user', component:UserAdmin},
    {path:'/sku', component:SkuAdmin}
]
const router = new VueRouter({
    routes
})
var vm11 = new Vue({
    router
}).$mount('#app11');

//axios全局配置，参考：https://www.runoob.com/vue2/vuejs-ajax-axios.html
// axios.defaults.baseURL = 'https://api.example.com';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

var vm12 = new Vue({
    el: '#app12',
    data:{
        sites:[]
    },
    mounted(){
        axios({
            method: 'post',
            url: '/user/12345',
            timeout: 1000,
            // `params` 是即将与请求一起发送的 URL 参数
            params: {
                ID: 12345
            },
            //`data` 是作为请求主体被发送的数据，只适用于这些请求方法 "PUT", "POST", 和 "PATCH"
            data: {
                firstName: 'Fred',
                lastName: 'Flintstone'
            }
        })
        .then(response=>(this.sites = response.data.sites))
        .catch(function (error){
             console.log(error);
        });
    }
})





